<template>
    <block title="作物叶片温度">
       
        <div ref="chart" class="chart-p">

        </div>

    </block>
</template>
<script setup lang="ts">
import block from '@/components/block.vue';
import { onMounted, ref } from 'vue';
import echarts from '@/components/echarts';
import tabs from '@/components/tabs.vue';
const chart = ref()
const btnType = ref(0)
let myChart: echarts.ECharts


const initChart = () => {
    myChart = echarts.init(chart.value);
    var option;

    option = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '20%',
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
            axisLabel: {
                color: '#fff' // 设置X轴标签颜色为绿色
            }
        },
        yAxis: {
            type: 'value',
            name: '单位：℃',
            nameTextStyle: {
                color: '#fff'
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#fff'
            }
        },
        series: [
            {
                data: [16, 19, 11, 12, 9, 18, 17],
                type: 'line',
                smooth: true,
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }],
                    label: {
                        color: '#fff',
                        position: 'insideEndTop'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}



onMounted(() => {
    initChart()
})

</script>
<style scoped>
.chart-p {
    height: 25vh;
}

.btns {
    position: absolute;
    z-index: 10;
    top: 6vh;
    left: 1vw;
}
.ffcon{
    display: flex;
    justify-content: space-around;
    align-items:start;
    padding: 2vh 0;
}
.desc{
    color: #c7d4cb;
    font-size: 1.5vh;
}
.img-1{
    width: 11.3vw;
    height: 16.vh;
}
</style>